Drupal

Drupal 8 study note 5 : Creating a custom theme based on Classy

  1. In the root directory of your Drupal site, create a folder called mytheme in the themes folder.
  2. Inside the mytheme folder, create a mytheme.info.yml le so that Drupal can discover the theme. We will then edit this le
    1. First, we need to de ne the themes name using the name key: name: My Theme
    2. All the themes need to provide a description key, which will be displayed on the Appearance page: 
             description: My custom theme

      Next, we need to de ne the type of extension, that is, a theme, and the version of core that is supported:

             type: theme
       core: 8.x

      The base theme call allows us to instruct Drupal to use a speci c theme as a base: base theme: classy

      The last item is a regions key that is used to de ne the regions of the blocks that can be placed, which is a YAML-based array of key/value pairs:

             regions:
         header: Header
         primary_menu: 'Primary menu'
         page_top: 'Page top'
         page_bottom: 'Page bottom'
         breadcrumb: Breadcrumb
         content: Content

      Regions are rendered in the page template le, which will be covered in the next recipe, Twig templates.

      Log in to your Drupal site, and go to Appearance from the administrative toolbar.

      Click on Install and set default in the My theme entry in order to enable and use the new custom theme:

    The following keys are required, as a minimum, when you de ne a theme:

    name, description ,type , base theme ,core

    Library asset options

    Library assets can have configuration data attached to them. If there are no configuration items provided, a simple set of empty brackets is added. This is why, in each example, les end with {}.

    The following example, taken from core.libraries.yml, adds HTML5shiv: assets/vendor/html5shiv/html5shiv.min.js: { weight: -22, browsers: {

    IE: ‘lte IE 8’, ‘!IE’: false }, minified: true } Let’s take a look at the attributes of html5shiv.min.js:

    => The weight key ensures that the script is rendered earlier than other libraries
    => The browser tag allows you to specify conditional rules to load the scripting
    => You should always pass minified as true if the asset has already been minified

    Library dependencies

    Here’s an example from the Quick Edit module’s libraries.yml le:

       quickedit:
     version: VERSION
     js:

    … css:

           ...
     dependencies:
       - core/jquery
       - core/jquery.once
       - core/underscore
       - core/backbone
       - core/jquery.form
       - core/jquery.ui.position
       - core/drupal
       - core/drupal.displace
       - core/drupal.form
       - core/drupal.ajax
       - core/drupal.debounce
       - core/drupalSettings

       - core/drupal.dialog

    Overriding and extending other libraries

     libraries-override:
     core/jquery.ui:

           css:
         component:

                assets/vendor/jquery.ui/themes/base/core.css: false
         theme:

    assets/vendor/jquery.ui/themes/base/theme.css: css/jqueryui.

    Using a CDN or external resource as a library

    mytheme.fontawesome:
     remote: http://fontawesome.io/
     version: 4.4.0
     license:
       name: SIL OFL 1.1
       url: http://fontawesome.io/license/
       gpl-compatible: true

    css: base:

             https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-
   awesome.min.css: { type: external, minified: true }

    Manipulating libraries from hooks

    hook_library_info() hook to provide a library definition.

    Placing JavaScript in the header

    js-library:

    header: true

    js:
  js/myscripts.js: {}

     

     

     

 

wang

Leave a Comment